<script>
import axisPointer from './axisPointer.vue';
import tooltipCover from './tooltipCover.vue';
import tooltipText from './tooltipText.vue';
export default {
  name: 'Tooltip',
  components: {
    axisPointer,
    tooltipCover,
    tooltipText
  },
  inject: ['father'],
  data() {
    return {
      activeName: '1',
      options: [
        {
          title: '指示器',
          name: '1',
          render: () => <axisPointer />
        },
        {
          title: '提示框浮层',
          name: '2',
          render: () => <tooltipCover />
        },
        {
          title: '提示框文本',
          name: '3',
          render: () => <tooltipText />
        }
      ]
    };
  },
  computed: {
    tooltip: {
      get() {
        return this.father.echartsOptions.tooltip;
      },
      set(val) {
        this.father.echartsOptions.tooltip = val;
      }
    }
  },
  mounted() {},
  methods: {},
  render() {
    return (
      <div>
        <el-form-item label="显示">
          <el-switch v-model={this.tooltip.show}></el-switch>
        </el-form-item>
        <el-form-item label="触发类型">
          <el-radio-group v-model={this.tooltip.trigger}>
            <el-radio-button label="item">数据</el-radio-button>
            <el-radio-button label="axis">坐标轴</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-collapse v-model={this.activeName} accordion>
          {this.options.map((item) => {
            return (
              <el-collapse-item title={item.title} name={item.name}>
                {item.render()}
              </el-collapse-item>
            );
          })}
        </el-collapse>
      </div>
    );
  }
};
</script>

<style scoped>
</style>